<template>
  <view :style="colorStyle">
    <view class="applyModule" v-if="false">
      <image
        src="http://xpj40szpt.signalpha.cn/img/img19.png"
        class="img"
        mode="aspectFill"
      ></image>
      <!-- <view class="ruleModule cfff f24" @click="gourl('/pages/seller/applayList')">
				申请记录
			</view> -->
    </view>

    <view class="infobox1" v-if="info.status == 1">
      <view class="info1">
        <view class="label"> 登录地址 </view>
        <view class="input">
          <input
            type="text"
            :value="sellerUrl"
            placeholder-class="placeholder"
            :disabled="info.status !== -1"
          />
        </view>
        <image
          src="@/static/img100.png"
          class="copy"
          @click.stop="copy(sellerUrl)"
        />
      </view>
      <view class="info1">
        <view class="label"> 商户账号 </view>
        <view class="input">
          <input
            type="text"
            placeholder-class="placeholder"
            placeholder="请输入联系人"
            v-model="mobile"
            :disabled="info.status !== -1"
          />
        </view>
      </view>
      <view class="info1">
        <view class="label"> 初始密码 </view>
        <view class="input">
          <input
            type="text"
            placeholder-class="placeholder"
            placeholder="请输入联系电话"
            :value="'手机后6位数'"
            :disabled="info.status !== -1"
          />
        </view>
      </view>
    </view>

    <view class="infobox1">
      <view class="info1">
        <view class="label">
          <text>*</text>
          商家名称
        </view>
        <view class="input">
          <input
            type="text"
            v-model="name"
            placeholder-class="placeholder"
            placeholder="请输入商家名称"
            :disabled="info.status !== -1"
          />
        </view>
      </view>
      <view class="info1">
        <view class="label">
          <text>*</text>
          联系人
        </view>
        <view class="input">
          <input
            type="text"
            placeholder-class="placeholder"
            placeholder="请输入联系人"
            v-model="legalPerson"
            :disabled="info.status !== -1"
          />
        </view>
      </view>
      <!-- <view class="info1">
				<view class="label">
					<text>*</text>
					商铺地址
				</view>
				<view class="input">
					<view class="f28 c858585" v-if="!province" style=" margin: 0 50rpx 0 0; color: #858585;">
						定位
					</view>
					<view class="" v-if="province" style="text-align: right; margin: 0 30rpx 0 0; color: #333;">
						{{ province }}{{ city }}{{ district }}
					</view>
					<view class="right">
						<image src="@/static/img21.png" mode="widthFix" />
					</view>
				</view>
			</view> -->
      <view class="info1">
        <view class="label">
          <text>*</text>
          联系电话
        </view>
        <view class="input">
          <input
            type="number"
            placeholder-class="placeholder"
            placeholder="请输入联系电话"
            v-model="mobile"
            :disabled="info.status !== -1"
          />
        </view>
      </view>
      <view class="info1" v-if="info.status == -1">
        <view class="label">
          <text>*</text>
          短信验证码
        </view>
        <view class="input">
          <input
            type="number"
            maxlength="10"
            placeholder-class="placeholder"
            placeholder="请输入短信验证码"
            v-model="smsCode"
          />
          <view class="getCode themeColor f28" @click="getCode">
            {{ codetext }}
          </view>
        </view>
      </view>
      <view class="info1" style="position: relative">
        <picker
          class="avatar-wrapper"
          mode="selector"
          :range="cateList"
          range-key="name"
          :value="cateListindex"
          @change="cateListChange"
          :disabled="info.status !== -1"
        >
          <view class="avatar-wrapper"> </view>
        </picker>
        <view class="label">
          <text>*</text>
          商家分类
        </view>
        <view class="input">
          <view
            class="f28 c858585"
            v-if="cateListindex == null"
            style="margin: 0 50rpx 0 0; color: #858585"
          >
            请选择
          </view>
          <view
            class="c1F1F1F f32"
            v-else
            style="margin: 0 30rpx 0 0; color: #333"
          >
            {{ cateList[cateListindex].name }}
          </view>
          <view class="right">
            <image src="@/static/img18.png" mode="widthFix" />
          </view>
        </view>
      </view>
      <view class="info1" style="border: none">
        <view class="label">
          <text>*</text>
          上传资质凭证（最多3张）
        </view>
        <view class="imgList flex wrap aitems">
          <view class="img" v-for="(item, index, key) in licenseImg" :key="key">
            <image :src="item" mode="aspectFill"></image>
            <view
              class="close"
              @click="closeImg(index)"
              v-if="info.status == -1"
            >
              <image src="@/static/img41.png" class="" mode=""></image>
            </view>
          </view>
          <view
            class="img"
            @click="uploadImg"
            v-if="licenseImg.length < 3 && info.status == -1"
          >
            <image src="@/static/img20.png" mode=""></image>
          </view>
        </view>
      </view>
      <!-- <view class="globalBtns">
				<view class="block1" @click="save">
					申请入驻
				</view>
				<view class="radioGroup">
					<radio-group>
						<view class="radio flex aitems jcenter">
							<view class="" @click="check = !check">
								<radio style="transform: scale(0.7);" :checked="check"
									:activeBackgroundColor="`var(--view-theme)`"></radio>
							</view>
							<view class="radiotext f24">
								请认真阅读并同意<text
									@click="gourl(`/pages/user/xieyi?key=sellerAdd&title=商家入驻协议`)">《商家入驻协议》</text>
							</view>
						</view>
					</radio-group>
				</view>
			</view> -->
    </view>

    <view
      class="globalBtns"
      style="position: relative; margin: 50rpx 30rpx 0; background: transparent"
      v-if="info.status == 0"
    >
      <view class="block1" style="background: #ef8200"> 审核中 </view>
    </view>

    <view
      class="globalBtns"
      style="position: relative; margin: 50rpx 30rpx 0; background: transparent"
      v-if="info.status == 1"
    >
      <view class="block1" style="background: var(--view-theme)">
        审核通过
      </view>
    </view>

    <view
      class="globalBtns"
      style="position: relative; margin: 50rpx 30rpx 0; background: transparent"
      v-if="info.status == -1"
    >
      <view class="tcenter cDD5C5C f28" style="padding: 30rpx 0">
        审核失败原因：{{ info.remark }}
      </view>
      <view class="block1" @click="save" style="background: #dd5c5c">
        重新申请
      </view>
      <view class="radioGroup">
        <radio-group>
          <view class="radio flex aitems jcenter" @click="check = !check">
            <radio
              style="transform: scale(0.7)"
              :checked="check"
              :activeBackgroundColor="`var(--view-theme)`"
            ></radio>
            <view class="radiotext f24">
              请认真阅读并同意<text
                @click="
                  gourl(`/pages/user/xieyi?key=sellerAdd&title=商家入驻协议`)
                "
                >《商家入驻协议》</text
              >
            </view>
          </view>
        </radio-group>
      </view>
    </view>

    <view class="" style="height: 100rpx"> </view>
  </view>
</template>

<script>
import {
  putFileOSS,
  sellerApplySave,
  sellerApplyUpdate,
  sellerApplyInfo,
  sellerApplyCategoryList,
  smsCode,
  paramConfig,
} from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import { go, loading, msg, showModal, back } from "@/utils/wxAPI.js";
import { getToken, setStorage } from "../../utils/storage";
import colors from "@/mixins/color";
import { isvalidatemobile } from "@/utils/validate.js";
export default {
  mixins: [colors],
  data() {
    return {
      check: false,
      cateList: [
        // {
        // 	name: '服装'
        // },
        // {
        // 	name: '农产品'
        // }
      ],
      cateListindex: null,
      name: "",
      licenseImg: [],
      legalPerson: "",
      mobile: "",
      smsCode: "",
      codetext: "获取验证码",
      info: {},
      sellerUrl: "",
    };
  },
  async onLoad(options) {
    this.options = options;
    if (getToken()) {
      this.paramConfig();
      await this.sellerApplyCategoryList();
      this.sellerApplyInfo();
    }
  },
  methods: {
    async paramConfig() {
      let { data } = await paramConfig({
        key: "seller.href",
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let link = data.data;
        this.sellerUrl = link;
      }
    },
    async sellerApplyInfo() {
      loading();
      let { data } = await sellerApplyInfo({
        id: this.options.id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        this.name = info.name;
        this.mobile = info.mobile;
        this.legalPerson = info.legalPerson;
        this.licenseImg = info.licenseImg.split(",");
        this.cateList.map((item, index) => {
          if (item.id == info.categoryId) {
            this.cateListindex = index;
          }
        });
        this.info = info;
      }
      uni.hideLoading();
    },
    async sellerApplyCategoryList() {
      let { data } = await sellerApplyCategoryList();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.cateList = data.data;
      }
    },
    cateListChange(e) {
      this.cateListindex = e.detail.value;
    },
    gourl(url) {
      go(url);
    },
    async save() {
      if (!this.check) {
        return msg("请阅读并勾选《商家入驻协议》");
      }
      if (!this.name) {
        return msg("请输入商家名称");
      }
      if (!this.legalPerson) {
        return msg("请输入联系人");
      }
      if (isvalidatemobile(this.mobile)[0]) {
        return msg(isvalidatemobile(this.mobile)[1]);
      }
      if (!this.smsCode) {
        return msg("请输入短信验证码");
      }
      if (this.cateListindex == null) {
        return msg("请选择商家分类");
      }
      if (this.licenseImg.length == 0) {
        return msg("请上传资质凭证");
      }
      loading();
      if (this.options.id) {
        let { data } = await sellerApplySave({
          categoryId: this.cateList[this.cateListindex].id,
          legalPerson: this.legalPerson,
          licenseImg: this.licenseImg.join(","),
          mobile: this.mobile,
          name: this.name,
          smsCode: this.smsCode,
          // "categoryId": "",
          // id: this.options.id ? this.options.id : "",
        });
        if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
          showModal({
            t2: "提交成功，请等待审核",
            btn1show: false,
          }).then(() => {
            this.name = "";
            this.mobile = "";
            this.smsCode = "";
            this.legalPerson = "";
            this.cateListindex = null;
            this.licenseImg = [];
            setStorage("sellerRef", 1);
            back();
          });
        }
        uni.hideLoading();
        return;
      }
      let { data } = await sellerApplySave({
        categoryId: this.cateList[this.cateListindex].id,
        legalPerson: this.legalPerson,
        licenseImg: this.licenseImg.join(","),
        mobile: this.mobile,
        name: this.name,
        smsCode: this.smsCode,
        // "categoryId": "",
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        showModal({
          t2: "提交成功，请等待审核",
          btn1show: false,
        }).then(() => {
          this.name = "";
          this.mobile = "";
          this.smsCode = "";
          this.legalPerson = "";
          this.cateListindex = null;
          this.licenseImg = [];
          setStorage("sellerRef", 1);
          back();
        });
      }
      uni.hideLoading();
    },
    async uploadImg() {
      uni.chooseImage({
        count: 3 - this.licenseImg.length,
        success: async (res) => {
          let tempFilePaths = res.tempFilePaths;
          loading();
          for (let i = 0; i < tempFilePaths.length; i++) {
            let { data } = await putFileOSS(tempFilePaths[i]);
            this.licenseImg.push(data.link);
            if (i == tempFilePaths.length - 1) {
              uni.hideLoading();
            }
          }
        },
      });
    },
    closeImg(index) {
      this.licenseImg.splice(index, 1);
    },
    async getCode() {
      if (this.codetext == "获取验证码") {
        if (isvalidatemobile(this.mobile)[0]) {
          return msg(isvalidatemobile(this.mobile)[1]);
        }
        loading();
        let { data } = await smsCode({
          mobile: this.mobile,
        });
        if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
          let num = 60;
          this.codetext = num;
          let timer = setInterval(() => {
            uni.hideLoading();
            num -= 1;
            this.codetext = num;
            if (num == 0) {
              this.codetext = "获取验证码";
              clearInterval(timer);
            }
          }, 1000);
        }
        uni.hideLoading();
      }
    },
    copy(data) {
      uni.setClipboardData({
        data,
        success() {
          msg("复制成功");
        },
      });
    },
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.applyModule {
  position: relative;

  .img {
    width: 100%;
    height: 422rpx;
  }

  .ruleModule {
    position: fixed;
    width: 171rpx;
    height: 56rpx;
    border-radius: 28rpx 0 0 28rpx;
    right: 0;
    top: 66rpx;
    z-index: 9;
    background: rgba(0, 0, 0, 0.6);
    line-height: 56rpx;
    text-align: center;
  }
}

.infobox1 {
  background: #ffffff;
  margin: 30rpx 30rpx 0;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  position: relative;
  // top: -130rpx;
}

.infobox1 .info1 {
  // height: 100rpx;
  padding: 24rpx 0;
  // border-bottom: 1px solid red;
  border-bottom: 1px solid #f5f5f5;
  position: relative;
  .copy {
    width: 32rpx;
    height: 32rpx;
    position: absolute;
    right: 0;
    bottom: 30rpx;
  }
}

.infobox1 .info1 .label {
  font-style: normal;
  font-weight: 400;
  font-size: 24rpx;
  color: #525252;
}

.infobox1 .info1 .label text {
  color: #f65b49;
  font-size: 24rpx;
}

.infobox1 .info1 .input {
  position: relative;
  margin: 24rpx 0 0;

  .getCode {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
  }

  // width: calc(100% - 200rpx);
}

.infobox1 .info1 .placeholder {
  font-style: normal;
  font-weight: 400;
  font-size: 28rpx;
  color: #858585;
}

.infobox1 .info1 .input input {
  // text-align: right;
  width: 100%;
  font-style: normal;
  font-weight: 400;
  font-size: 32rpx;
  color: #1f1f1f;
}

.infobox1 .info1 .icon {
  width: 100rpx;
  height: 60rpx;
}

.imgList {
  margin: 30rpx 0 0;

  image {
    width: 180rpx;
    height: 180rpx;
    border-radius: 24rpx;
    margin: 0 30rpx 30rpx 0;
  }

  .img {
    position: relative;

    .close {
      width: 44rpx;
      height: 44rpx;
      position: absolute;
      right: 0;
      top: 0;
      // background: rgba(255, 255, 255, .5);

      image {
        width: 44rpx;
        height: 44rpx;
        position: absolute;
        right: 0;
        top: 0;
        // background: rgba(255, 255, 255, .5);
      }
    }
  }
}

.infobox1 .info1 .input .right {
  width: 40rpx;
  // height: 24rpx;
  position: absolute;
  top: 0rpx;
  right: 0;
}

.btn {
  width: 600rpx;
  height: 88rpx;
  text-align: center;
  line-height: 88rpx;
  color: #ffffff;
  font-style: normal;
  font-weight: 400;
  font-size: 28rpx;
  background: #5ccedd;
  border-radius: 44rpx;
  margin: 30rpx auto 0;
  position: relative;
}

.globalBtns {
  // position: fixed;
  // bottom: 0;
  // width: 100%;
  background: #fff;
  margin: 50rpx 0 0;
  // padding: 0 0 50rpx 0;

  .block1 {
    // margin: 10rpx 30rpx 0;
    background: var(--view-theme);
    border-radius: 40rpx;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    color: #fff;
    font-size: 28rpx;
    font-weight: bold;
  }
}

image {
  width: 100%;
  height: 100%;
}

.radioGroup {
  margin: 30rpx 0 0;

  .radiotext {
    // margin-left: 10rpx;
    text {
      color: #f65b49;
    }
  }
}
</style>
